<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>图片加载平移放大缩小示例</title>
    <link rel="stylesheet" href="http://www.ytbuyer.com/style/commons/reset.css">
    <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="vendor/jquery/dist/jquery.js"></script>
    <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
    <script src="vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="js/index.js"></script>
</head>

<body>

<div class="logo p-a"><img src="./images/logo.png"/></div>

<ul class="btn-list p-a">
    <li id="two1"><button><img src="./images/sec-btn.png" class="science-btn">&nbsp;&nbsp;环境指标</button></li>
    <li id="two2"><button><img src="./images/base_btn.png" class="base-btn">&nbsp;&nbsp;基地信息</button></li>
</ul>

<div class="search-input p-a">
<div class="row">
    <form class="navbar-form">
        <div class="col-lg-12">
            <div class="row">
                <div class="input-group">
                    <div class="input-group-btn">
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle bor-w btn-rdis" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                湖北 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">湖北</a></li>
                                <li><a href="#">湖北</a></li>
                                <li><a href="#">湖北</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">全国</a></li>
                            </ul>
                        </div>
                    </div>
                    <input type="text" class="form-control bor-w" autocomplete="off" placeholder="搜索农产品品类、农场"/>
                    <div class="input-group-btn">
                        <div class="btn btn-default bor-w btn-rdis" id="ser-focus"><span class="glyphicon glyphicon-search"></span></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


</div>

<!--地图展示-->
<div class="map-pos t-c">
    <div class="map-center d-ib p-r">
        <img src="./images/hubei2.svg" id="img" class="p-r"/>

        <!--农场定位-->
        <div class="drag p-a c-p" style="display: none; left: 40%; top: 20%;" data-toggle="modal" data-target="#myModal">1</div>

        <div class="drag fouce p-a c-p" title="阳光葡萄园种植基地" style="display: none;" data-toggle="modal" data-target="#myModal">2</div>

        <div class="drag p-a c-p" style="display: none; left: 35%; bottom: 50%;" data-toggle="modal" data-target="#myModal">3</div>
    </div>
</div>

<div class="bubble p-f" id="doter">
    <div class="dot t-c p-a c-p">111</div>
    <div class="pulse p-a"></div>
    <div class="pulse pulse1 p-a"></div>
</div>

<ul class="tool-btn p-a" id="con_two_1" style="display: none">
    <li id="altitude" class="first_li">
        海拔<span class="line"></span>
        <div class="drop-down">
            <h5>海拔(m)</h5>
            <ol>
                <li style="background: #d9d4f1"></li>
                <li style="background: #f38033"></li>
                <li style="background: #f6aa35"></li>
                <li style="background: #f9ca6e"></li>
                <li style="background: #fced9d"></li>
                <li style="background: #d4f788"></li>
                <li style="background: #8bcf39"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li id="sunshine">
        日照时长<span class="line"></span>
        <div class="drop-down">
            <h5>日照时长(小时)</h5>
            <ol>
                <li style="background: #f0181c"></li>
                <li style="background: #f02f1d"></li>
                <li style="background: #f15620"></li>
                <li style="background: #f47e22"></li>
                <li style="background: #f4a92a"></li>
                <li style="background: #fad333"></li>
                <li style="background: #fffc3a"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li id="frost">
        无霜期<span class="line"></span>
        <div class="drop-down">
            <h5>无霜期(天)</h5>
            <ol>
                <li style="background: #e71414"></li>
                <li style="background: #f97a2c"></li>
                <li style="background: #fdcf50"></li>
                <li style="background: #d7e37c"></li>
                <li style="background: #8db9a5"></li>
                <li style="background: #2893c7"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li id="precipitation">
        年均降水量<span class="line"></span>
        <div class="drop-down">
            <h5>年均降水量(mm)</h5>
            <ol>
                <li style="background: #1b2dfc"></li>
                <li style="background: #1c2ffb"></li>
                <li style="background: #1d3bfc"></li>
                <li style="background: #2553fa"></li>
                <li style="background: #2d6ffb"></li>
                <li style="background: #388afc"></li>
                <li style="background: #41a4fc"></li>
                <li style="background: #4cc1fa"></li>
                <li style="background: #59e1fd"></li>
                <li style="background: #65ffff"></li>
                <li style="background: #63fee1"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li id="temperature">
        年平均温度<span class="line"></span>
        <div class="drop-down">
            <h5>年平均温度(℃)</h5>
            <ol>
                <li style="background: #d9d4f1"></li>
                <li style="background: #f38033"></li>
                <li style="background: #f6aa35"></li>
                <li style="background: #f9ca6e"></li>
                <li style="background: #fced9d"></li>
                <li style="background: #d4f788"></li>
                <li style="background: #8bcf39"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li id="humidity">
        年均相对湿度<span class="line"></span>
        <div class="drop-down">
            <h5>年均相对湿度(%)</h5>
            <ol>
                <li style="background: #d9d4f1"></li>
                <li style="background: #f38033"></li>
                <li style="background: #f6aa35"></li>
                <li style="background: #f9ca6e"></li>
                <li style="background: #fced9d"></li>
                <li style="background: #d4f788"></li>
                <li style="background: #8bcf39"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
</ul>

<ul class="tool-btn p-a tool-base" id="con_two_2" style="display: none">
    <li id="btn-base" class="first_li">
        占地<span class="line"></span>
        <div class="drop-down">
            <h5>占地</h5>
            <ol>
                <li style="background: #d9d4f1"></li>
                <li style="background: #f38033"></li>
                <li style="background: #f6aa35"></li>
                <li style="background: #f9ca6e"></li>
                <li style="background: #fced9d"></li>
                <li style="background: #d4f788"></li>
                <li style="background: #8bcf39"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li>
        品种数量<span class="line"></span>
        <div class="drop-down">
            <h5>品种数量</h5>
            <ol>
                <li style="background: #f0181c"></li>
                <li style="background: #f02f1d"></li>
                <li style="background: #f15620"></li>
                <li style="background: #f47e22"></li>
                <li style="background: #f4a92a"></li>
                <li style="background: #fad333"></li>
                <li style="background: #fffc3a"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li>
        种植标准<span class="line"></span>
        <div class="drop-down">
            <h5>种植标准</h5>
            <ol>
                <li style="background: #e71414"></li>
                <li style="background: #f97a2c"></li>
                <li style="background: #fdcf50"></li>
                <li style="background: #d7e37c"></li>
                <li style="background: #8db9a5"></li>
                <li style="background: #2893c7"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
    <li>
        服务能力<span class="line"></span>
        <div class="drop-down">
            <h5>服务能力</h5>
            <ol>
                <li style="background: #1b2dfc"></li>
                <li style="background: #1c2ffb"></li>
                <li style="background: #1d3bfc"></li>
                <li style="background: #2553fa"></li>
                <li style="background: #2d6ffb"></li>
                <li style="background: #388afc"></li>
                <li style="background: #41a4fc"></li>
                <li style="background: #4cc1fa"></li>
                <li style="background: #59e1fd"></li>
                <li style="background: #65ffff"></li>
                <li style="background: #63fee1"></li>
            </ol>
            <ul>
                <li>10000</li>
                <li>5000</li>
                <li>3000</li>
                <li>2000</li>
                <li>1000</li>
                <li>500</li>
                <li>200</li>
                <li>0</li>
            </ul>
        </div>
    </li>
</ul>

<div class="search-box p-a" style="display: none;">
    <div class="panel panel-primary serbox-bg box-bor">
        <!--<div class="panel-heading">搜索结果</div>-->
        <div class="panel-body">
            <ul class="list-group" id="first">
                <li class="list-group-item no-bg font-wet">
                    <h5 class="list-group-item-heading">相关产品（共2种）</h5>
                </li>
                <li class="list-group-item serbox-bg font-wet">
                    <div class="list-group-item-text">
                        <a class="badge">金牡丹</a>&nbsp;&nbsp;8家农场可供
                    </div>
                </li>
                <li class="list-group-item serbox-bg font-wet">
                    <div class="list-group-item-text">
                        <a class="badge">罗汉松</a>&nbsp;&nbsp;2家农场可供
                    </div>
                </li>
            </ul>

            <ul class="list-group" id="second">
                <li class="list-group-item serbox-bg font-wet">
                    <h5 class="list-group-item-heading ">相关农场（共37家）</h5>
                </li>
                <li class="list-group-item no-bg font-wet">
                    <div class="list-group-item-text">献县东领苗木种植专业合作社1号基地</div>
                </li>
                <li class="list-group-item no-bg font-wet">
                    <div class="list-group-item-text">赵县达丰家庭农场第1基地</div>
                </li>
            </ul>

            <ul class="list-group" id="third">
                <li class="list-group-item no-bg no-border font-wet">
                    <div class="list-group-item-text">
                        <ul class="media-list">
                            <li class="media">
                                <div class="media-body">
                                    <h5 class="media-heading">1.元泰永泰有机生态茶园</h5>
                                    <article class="font-se">地址：福建省福州市永泰县同安镇联坪村</article>
                                    <p><span class="badge font-se"> 生 产 </span></p>
                                </div>
                                <span class="media-right media-middle">
					                        <img src="./images/1sh.jpg" class="media-object img-responsive" style="height: 65px"/>
				                        </span>
                                <hr/>
                            </li>
                            <li class="media">
                                <div class="media-body">
                                    <h5 class="media-heading">2.阳光农场</h5>
                                    <article class="font-se">地址：福建省福州市永泰县同安镇联坪村</article>
                                    <p><span class="badge font-se"> 生 产 </span></p>
                                </div>
                                <span class="media-right media-middle">
					                        <img src="./images/1sh.jpg" class="media-object img-responsive" style="height: 65px"/>
				                        </span>
                                <hr/>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="tool-info p-a">
    <dl class="dl-horizontal">
        <dt class="c-p" id="showFarm">
            <button class="farm"><img src="./images/related_data.png" class="science-btn">&nbsp;&nbsp;农场排名</button>
        </dt>
        <dd class="c-p" id="showCovers">
            <button class="ranking"><img src="./images/ranking.png" class="science-btn"></button>
        </dd>
    </dl>
</div>

<dl class="info-list p-a" id="farm" style="display: none;">
    <dt class="col-lg-12"><br/>占地排名<br/>
        <hr/>
    </dt>
    <dd><span class="col-lg-6 nc-name">1.四季美农场</span><span class="col-lg-6 text-right">29912亩</span></dd>
    <dd><span class="col-lg-6 nc-name">2.欧美汇农场</span><span class="col-lg-6 text-right">17365亩</span></dd>
    <dd><span class="col-lg-6 nc-name">3.智慧乡村</span><span class="col-lg-6 text-right">13245亩</span></dd>
    <dd><span class="col-lg-6 nc-name">4.稷山有机蔬菜种植基地</span><span class="col-lg-6 text-right">9573亩</span></dd>
    <dd><span class="col-lg-6 nc-name">5.四季美农场</span><span class="col-lg-6 text-right">29912亩</span></dd>
    <dd><span class="col-lg-6 nc-name">6.四季美农场</span><span class="col-lg-6 text-right">7365亩</span></dd>
    <dd><span class="col-lg-6 nc-name">7.智慧乡村</span><span class="col-lg-6 text-right">3254亩</span></dd>
    <dd><span class="col-lg-6 nc-name">8.稷山有机蔬菜种植基地</span><span class="col-lg-6 text-right">2404亩</span></dd>
</dl>

<dl class="info-list p-a" id="covers">
    <dt class="col-lg-12"><br/>已选择<br/><span class="badge">2500-3000小时  <i
            class="glyphicon glyphicon-remove remove"></i></span>
        <hr/>
    </dt>
    <dd><span class="col-lg-6 nc-name">全省农场：</span><span class="col-lg-6 text-right">527家</span></dd>
    <dd><span class="col-lg-6 nc-name">占地面积：</span><span class="col-lg-6 text-right">17.86万亩</span></dd>
    <dd><span class="col-lg-6 nc-name">供应品种：</span><span class="col-lg-6 text-right">313种</span></dd>
</dl>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content serbox-bg">
            <div class="modal-header box-bor">
                <span class="close font-wet o-p" data-dismiss="modal">&times;</span>
                <h4 class="modal-title"></h4>
            </div>

            <div class="modal-body">
                <div class="media">
							<span class="media-left media-middle">
					            <a href="./farmDetail.html"><img src="./images/u67.png" class="media-object"/></a>
				            </span>
                    <div class="media-body">
                        <h4 class="media-heading font-wet">阳光农场</h4>
                        <article class="font-se">负责人：陈丽华 <br/> 地址：福建省福州市永泰县同安镇联坪村 </article>
                    </div>
                </div>

                <div class="row">
                    <h6></h6>
                    <ul class="list-inline">
                        <li class="col-lg-3 text-center"><img src="./images/icon1.png"></li>
                        <li class="col-lg-3 text-center"><img src="./images/icon2.png"></li>
                        <li class="col-lg-3 text-center"><img src="./images/icon3.png"></li>
                        <li class="col-lg-3 text-center"><img src="./images/icon4.png"></li>
                    </ul>
                    <h6></h6>
                </div>

            </div>

            <div class="modal-footer box-bor">
                <h5 class="text-left font-wet">当前种植：<span class="pull-right">10种作物</span></h5>
                <article class="row">
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-4 col-xs-6">
                        <div class="thumbnail">
                            <img src="./images/u67.png"/>
                        </div>
                    </div>
                </article>
                <ul class="pager page-ind">
                    <li><a href="#">&laquo;</a></li>
                    <li><a href="#">&raquo;</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<span class="scale p-f"></span>

</body>
</html>